<template>
  <div class="base-set bg-light">
    <div class="container-title">基础设置</div>
    <Form ref="form" :label-width="140" class :model="form" :rules="rules">
      <Row class="pr">
        <i-col span="8">
          <FormItem label="促销名称" prop="name">
            <Input v-model="form.name" placeholder="请输入名称" :maxlength="15" :disabled="setDisabled" />
          </FormItem>
        </i-col>
      </Row>
      <Row class="pr">
        <i-col span="8">
          <FormItem label="是否仅首次首单返券" prop="gender" :label-width="140">
            <RadioGroup v-model="form.gender" :disabled="setDisabled">
              <Radio label="1" :disabled="setDisabled">是</Radio>
              <Radio label="2" :disabled="setDisabled">否</Radio>
            </RadioGroup>
          </FormItem>
        </i-col>
      </Row>
      <Row>
        <i-col span="24">
          <FormItem label="活动对象" prop="grade">
            <CheckboxGroup v-model="form.grade" :disabled="setDisabled">
              <Checkbox v-for="item in storeTypeData" :key="item.id" :disabled="setDisabled" :label="item.value">{{ item.text }}</Checkbox>
            </CheckboxGroup>
          </FormItem>
        </i-col>
      </Row>
      <Row>
        <FormItem label="参与方式" prop="joinType">
          <RadioGroup v-model="form.joinType">
            <Radio label="1" :disabled="setDisabled">全场商品参加</Radio>
            <Radio label="2" :disabled="setDisabled">部分商品参加</Radio>
            <Radio label="3" :disabled="setDisabled">部分商品不参加</Radio>
          </RadioGroup>
        </FormItem>
      </Row>
      <Row class="pr">
        <i-col span="8">
          <FormItem label="活动备注" prop="remarks">
            <Input v-model="form.remarks" type="textarea" :disabled="setDisabled" placeholder="请输入活动备注" :maxlength="128" />
          </FormItem>
        </i-col>
      </Row>
      <Row class="pr">
        <i-col span="24">
          <FormItem label="返券形式" :label-width="140">
            <RadioGroup v-model="form.returnType" :disabled="setDisabled">
              <Radio label="1" :disabled="setDisabled">订单满商品数量返券</Radio>
              <Radio label="2" :disabled="setDisabled">满金额返券</Radio>
            </RadioGroup>
          </FormItem>
        </i-col>
      </Row>
      <Row v-if="getReturnType == 'PRODUCT'" class="pr">
        <i-col span="24 ">
          <div class="title-" />
          <div class="all-select">
            <div class="notice">
              <span>*</span>活动规则： 单个订单以下条件满足方可返券
            </div>
            <div class="rule-item">
              <div class="line1-item">
                <FormItem
                  v-for="(item,index) in form.returnTypeList"
                  :key="index"
                  :prop="'returnTypeList.' + index + '.value'"
                  :rules="{validator: validatenType, trigger: 'blur'}"
                  class="for-vouher"
                >
                  <div class="item-li">
                    <span v-show="index>=1" class="w60">
                      <Button icon="md-remove" size="small" :disabled="setDisabled" type="primary" class="createbutton" @click="onReduceType(index)" />满
                    </span>
                    <span v-show="index<=0" class="w60">
                      <Button icon="md-add" size="small" type="primary" :disabled="setDisabled" class="createbutton" @click="onAddType" />满
                    </span>
                    <Input v-model="item.value" style="width:100px" placeholder :maxlength="5" :disabled="setDisabled" />
                    <span class="w100">个商品返券</span>
                  </div>
                </FormItem>
              </div>
              <div class="line2-item">
                <!-- <Select v-model="item.couponId" class="mt20 w200" v-for="(item, index) in form.returnTypeList" :key="index">
                  <Option v-for="(item, index) in factoryTag"  :value="item.id" :key="index">{{item.label}}</Option>
                </Select> -->
                <GiftCoupon :set-disabled="setDisabled" :return-type-list="form.returnTypeList" />
              </div>
              <div class="line2-item">
                <div v-for="(item,index) in form.returnTypeList" :key="index" class="mb20">
                  <Checkbox v-model="item.isParcel" class="pl20" style="line-height: 32px">包邮</Checkbox>
                </div>
              </div>
            </div>
          </div>
        </i-col>
      </Row>
      <Row v-if="getReturnType == 'MONEY'" class="pr">
        <i-col span="24">
          <div class="title-" />
          <div class="all-select">
            <div class="notice">
              <span>*</span>活动规则： 以下条件满足方可返劵
            </div>
            <FormItem
              v-for="(item,index) in form.activityGiftCouponList"
              :key="index"
              :prop="'activityGiftCouponList.' + index + '.value'"
              :rules="{validator: validaten, trigger: 'blur'}"
              class="for-vouher"
            >
              <div class="item-li">
                <span v-show="index>=1">
                  <Button icon="md-remove" size="small" type="primary" :disabled="setDisabled" class="createbutton" @click="onReducevoucher(index)" />满
                </span>
                <span v-show="index<=0">
                  <Button icon="md-add" size="small" :disabled="setDisabled" type="primary" class="createbutton" @click="onAddvoucher" />满
                </span>
                <Input v-model="item.value" style="width:60px" placeholder :maxlength="5" :disabled="setDisabled" />
                <span class="w100">元返劵</span>
                <span v-show="!item.validityDays" class="createVoucher" @click="createVoucher(index)">创建优惠劵</span>
                <ul v-show="item.validityDays && item.denomination && item.useCondition" class="voucherList">
                  <li class="close" @click="closeCreate(item)"> <Icon type="ios-close-circle-outline" /> </li>
                  <li v-if="item.denomination !== 'custom'">￥{{ item.denomination }}</li>
                  <li v-if="item.denomination == 'custom'">￥{{ item.custom }}</li>
                  <li>满{{ item.useCondition }}元</li>
                  <li>有效期{{ item.validityDays }}天</li>
                </ul>
                <Checkbox v-model="item.isParcel" class="pl20" style="line-height: 32px">包邮</Checkbox>
              </div>
            </FormItem>
          </div>
        </i-col>
      </Row>
      <Row class="pr">
        <i-col span="10">
          <FormItem label="用户下单时间" :label-width="140" prop="date">
            <fomatDate
              v-model="form.date"
              :date-value="form.date"
              :disabled="setDisabled"
            />
            <!-- <DatePicker :options="options" placeholder="开始时间" type="datetimerange" v-model="form.date"></DatePicker> -->
          </FormItem>
        </i-col>
      </Row>
      <Row v-if="getReturnType == 'MONEY'" class="pr">
        <i-col span="10">
          <FormItem prop="endTime" label="用户在">
            <DatePicker
              v-model="form.endTime"
              placeholder="开始时间"
              type="datetime"
              :options="options"
              placement="top-end"
              :disabled="setDisabled"
            />
          </FormItem>
        </i-col>
        <i-col span="8">
          <span class="item-span">之前完成订单</span>
        </i-col>
      </Row>
      <Row v-if="getReturnType == 'MONEY'" class="pr">
        <i-col span="8">
          <FormItem label="订单在" prop="time">
            <Input v-model="form.time" style="width: 60px" :disabled="setDisabled" placeholder />
            <span class="item-span">天内，未申请退款</span>
          </FormItem>
        </i-col>
      </Row>
    </Form>
    <AddDiscount
      ref="AddDiscount"
      :form1="form1Validate"
      :rules1="rule1Validate"
      :modal1="modal1"
      @onOk="ok"
      @onCancel="cancel"
    />
  </div>
</template>
<script>
import AddDiscount from './AddDiscount'
import { validatenBody, addBody, list } from './DefaultEditMethods'
import fomatDate from '@/components/ChoseDateFormat'
import GiftCoupon from '@/components/SelectGiftCoupon'
import { mapGetters } from 'vuex'
export default {
  name: 'fullReturnDefault',
  components: {
    AddDiscount,
    fomatDate,
    GiftCoupon
  },
  props: {
    form: Object,
    rules: Object,
    setDisabled: {
      type: Boolean,
      default: () => false
    }
  },
  data () {
    return {
      model1: false,
      voucherIndex: '',
      modal1: false,
      options: {
        disabledDate (date) {
          return date && date.valueOf() < Date.now() - 86400000
        }
      },
      form1Validate: {
        denomination: '',
        useCondition: '',
        validityDays: '',
        custom: null,
        list
      },
      rule1Validate: {
        denomination: [
          { required: true, message: '请输入返劵面额', trigger: 'change' }
        ],
        joinType: [
          { required: true, message: '请选择参与方式', trigger: 'change' }
        ],
        useCondition: [
          { required: true, message: '请输入使用条件', trigger: 'blur' },
          { validator: this.validatecondition, trigger: 'blur' }
        ],
        validityDays: [
          { required: true, type: 'number', message: '请输入有效期', trigger: 'blur' }],
        custom: [
          { required: true, type: 'number', validator: this.validatecustom, trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'getReturnType',
      'storeTypeData'
    ])
  },
  mounted () {
    this.$store.dispatch('getStoreType')
  },
  methods: {
    validatecondition (rule, value, callback) {
      if (!/^\d+(\.\d{1,2})?$/.test(value)) {
        return callback(new Error('非负数且最多两位小数'))
      } else {
        if (this.form1Validate.denomination == 'custom') {
          if (this.form1Validate.custom / this.form1Validate.useCondition > 0.8) {
            return callback(new Error('返券面额不能大于使用条件金额的80%'))
          } else {
            callback()
          }
        } else {
          if (this.form1Validate.denomination / this.form1Validate.useCondition > 0.8) {
            return callback(new Error('返券面额不能大于使用条件金额的80%'))
          } else {
            callback()
          }
        }
      }
    },
    validatecustom (rule, value, callback) {
      if (!value) {
        callback(new Error('请输入金额'))
      } else if (!/^\d+(\.\d{1,2})?$/.test(value)) {
        return callback(new Error('非负数且最多两位小数'))
      } else {
        callback()
      }
    },
    validaten (rule, value, callback) {
      validatenBody(rule, value, callback, this.$store.state.fullReturnSale.FullreturnForm.activityGiftCouponList)
    },
    isTotalType (data) {
      let typeLength = this.$store.state.fullReturnSale.FullreturnForm.returnTypeList.filter((item, index) => { return data == item.value })
      return typeLength.length
    },
    validatenType (rule, value, callback) {
      if (!value) {
        callback(new Error('请输入订单数量'))
      } else if (!(/^\d+(?=\.{0,1}\d+$|$)/.test(value))) {
        callback(new Error('请输入大于0的正整数'))
      } else if (this.isTotalType(value) >= 2) {
        callback(new Error('订单数量不能相等'))
      } else {
        callback()
      }
    },
    createVoucher (index) {
      this.$refs.AddDiscount.modal1 = true
      this.voucherIndex = index
    },
    ok () {
      let self = this
      this.$refs.AddDiscount.$refs['form1'].validate(valid => {
        if (valid) {
          addBody(self)
          this.$refs.AddDiscount.modal1 = false
        } else {
          this.$refs.AddDiscount.modal1 = true
        }
      })
    },
    cancel () {
      this.$refs.AddDiscount.$refs['form1'].resetFields()
      this.$refs.AddDiscount.modal1 = false
    },
    onAddvoucher () {
      this.$store.commit('onAddvoucher')
    },
    onAddType () {
      this.$store.commit('onAddType')
    },
    onReduceType (index) {
      this.$store.commit('onReduceType', index)
    },
    closeCreate (item) {
      item['denomination'] = ''
      item['useCondition'] = ''
      item['validityDays'] = ''
    },
    onReducevoucher (index) {
      this.$store.commit('onReducevoucher', index)
    }
  }
}
</script>

